<template>
  <basic-dialog
    width="700px"
    title="选择核心原材料"
    :visible="visible"
    :showFooter="false"
    :handleClose="handleCloseDialog"
    :handleOpen="handleOpen"
  >
    <BasicForm
      :colNumOfRow="2"
      :isScalingBtn="false"
      :hasQueryPermission="false"
      :formColumns="formItemList"
      :dataSource="formData"
      :handleSearchForm="handleQueryForm"
      @getFormData="getFormData"
    />
    <BasicTable
      showActionCol
      :showSelectCol="false"
      :loading="tableInfo.loading"
      :columns="tableInfo.columns"
      :dataSource="tableInfo.list"
      :pagination="pagination"
      :pageSizes="pageSizes"
      :total="pagination.totalNum"
      :tableHeight="450"
      :actionRender="renderTableBtnAction"
      @pageChange="handlePageChange"
      @pageSizeSelect="handlePageSizeChange"
    />
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import BasicForm from '@/components/BasicForm';
import BasicTable from '@/components/skusTable';
import basePage from '@/mixins/commodity/skusPage';
import { getTableAction } from '@/utils/getBtnsRender';
import { OVERFLOAT_WARNING_TYPES } from '@/pages/supplier/constants/common';
import { list2Obj } from '@/pages/supplier/utils';
import { queryCoreRawMaterialService } from '@/api/supplier/components';

export default {
  // 选择核心原材料
  mixins: [basePage],
  components: {
    BasicDialog,
    BasicForm,
    BasicTable
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      formData: {
        rawMaterialId: '',
        rawMaterialName: '',
      },
      formItemList: [
        { label: '原材料代码', prop: 'rawMaterialId', type: 'input' },
        { label: '原材料名称', prop: 'rawMaterialName', type: 'input' },
      ],
      tableInfo: {
        loading: false,
        list: [],
        columns: [
          { title: '核心原材料编码',  key: 'id', width: 120 },
          { title: '核心原材料名称',  key: 'name', width: 120 },
          { title: '规格',  key: 'spec' },
          { title: '计量单位',  key: 'unitName' },
          { title: '原材料生产商',  key: 'producer', width: 100 },
          {
            title: '是否超浮动预警',
            key: 'overFloatWarnFlag',
            width: 120,
            formatter: (row, columns, cellValue) => {
              return list2Obj(OVERFLOAT_WARNING_TYPES)[cellValue];
            }
          },
          { title: '创建人',  key: 'createOperName' },
        ],
      }
    }
  },
  methods: {
    // 渲染表格按钮
    renderTableBtnAction (h, { row }) {
      const actionList = [{
        label: '选择',
        method: this.handleSelect
      }];
      return getTableAction({ h, row, actionList })
    },
    // 获取表单查询入参
    getSearchFormParams () {
      return {
        ...this.pagination,
        ...this.formData
      }
    },
    // 获取表格数据
    async getTableData () {
      const res = await queryCoreRawMaterialService(this.getSearchFormParams(), state => this.tableInfo.loading = state)
      if (res?.result) {
        this.tableInfo.list = res.result?.records ?? [];
        this.pagination.totalNum = res.result?.total ?? 0;
      }      
    },
    // 选择
    handleSelect (row) {
      const { name, overFloatWarnFlag } = row;
      this.$emit('getCoreRawMaterialInfo', { name, overFloatWarnFlag });
      this.handleCloseDialog();
    },
    // 关闭弹框
    handleCloseDialog () {
      this.$emit('update:visible', false);
    },
    handleOpen () {
      this.formData = {
        rawMaterialId: '',
        rawMaterialName: ''
      }
      this.tableInfo.list = []
      this.pagination.totalNum = 0
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-dialog__header {
  border-bottom: 1px solid #e8eaec;
}
/* 分页样式 */
.pagination_wrap {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
